<template>
    <div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="formRules" ref="form">
                <el-form-item label="产品名称" :label-width="formLabelWidth" prop="product_name">
                    <el-input v-model="form.product_name" autocomplete="off" placeholder="请输入产品名称" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="权值" :label-width="formLabelWidth" prop="qz">
                    <el-input v-model="form.qz" autocomplete="off" placeholder="请输入权值,类型为数值（权值越大，排位越前）" type="number" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="所需积分" :label-width="formLabelWidth" prop="integral">
                    <el-input v-model="form.integral" autocomplete="off" placeholder="请输入所需积分数量,类型为数值" type="number" :disabled="isDisabled"></el-input>
                </el-form-item>
                <el-form-item label="产品缩略图" :label-width="formLabelWidth">
                    <el-upload
                            class="avatar-uploader"
                            action="https://yx.tfnhg.com/oss_upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :disabled="isDisabled"
                    >
                        <img v-if="form.head_img" :src="form.head_img" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="notes">请选择图片格式，图片大小小于4M</span>
                </el-form-item>
                <el-form-item label="产品展示图" :label-width="formLabelWidth">
                    <el-upload
                            action="https://yx.tfnhg.com/oss_upload"
                            list-type="picture-card"
                            :file-list="form.top_img"
                            :on-preview="handlePictureCardPreviewBanner"
                            :on-success="handlePictureCardSuccessBanner"
                            :on-remove="handleRemoveBanner"
                            :disabled="isDisabled"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <span class="notes">建议上传图片为750px*750px</span>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="产品详情图" :label-width="formLabelWidth">
                    <el-upload
                            action="https://yx.tfnhg.com/oss_upload"
                            list-type="picture-card"
                            :file-list="form.content_img"
                            :disabled="isDisabled"
                            :on-success="handlePictureCardSuccessContent"
                            :on-preview="handlePictureCardPreviewContent"
                            :on-remove="handleRemoveContent">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <span class="notes">建议上传宽度为750px图片</span>
                    <el-dialog :visible.sync="dialogVisible01">
                        <img width="100%" :src="dialogImageUrl01" alt="">
                    </el-dialog>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="upLoadProductInfo('form')" :disabled="isDisabled">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "add-product.vue",
        props: {
            type: {
                type: String,
                default: '1'
            }
        },
        data() {
            return {
                title: '新增积分商品',
                form: {
                    product_name: '',
                    qz: '',
                    integral: '',
                    head_img: '',
                    content_img: [],
                    supplier_id: this.$store.state.supplier_id,
                    top_img: []
                },
                formBak:[],
                formRules: {
                    product_name: [
                        {
                            required: true, message:'请输入产品名称', trigger: 'blur'
                        }
                    ],
                    qz: [
                        {
                            required: true, message:'请输入权值', trigger: 'blur'
                        }
                    ],
                    integral: [
                        {
                            required: true, message:'请输入所需积分数量', trigger: 'blur'
                        }
                    ]
                },
                formLabelWidth: '100px',
                dialogFormVisible: false,
                dialogVisible: false,
                dialogImageUrl: '',
                dialogVisible01: false,
                dialogImageUrl01: '',
                isDisabled: false
            }
        },
        created() {
            if(this.type === "2") {
                this.title = "修改产品信息"
            }
        },
        watch: {
            formBak: function(val) {
                console.log(val);
                this.form = val
            }
        },
        methods: {
            handleAvatarSuccess(res) {
                console.log(res);
                this.form.head_img = res
            },
            beforeAvatarUpload(file) {
                console.log(file);
                const isJPG = file.type.split('/')[0] === 'image';
                const isLt2M = file.size / 1024 / 1024 < 4;

                if (!isJPG) {
                    this.$message.error('上传格式必须为图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 4MB!');
                }
                return isJPG && isLt2M;
            },
            handlePictureCardSuccessBanner(res, file, fileList) {
                console.log(res, file, fileList);
                this.form.top_img = this.$util.disposeFile(fileList)
            },
            handleRemoveBanner(file, fileList) {
                console.log(file, fileList);
                this.form.top_img = this.$util.disposeFile(fileList)
            },
            handlePictureCardPreviewBanner(file) {
                this.dialogImageUrl = file.response;
                this.dialogVisible = true;
            },
            handlePictureCardSuccessContent(res, file, fileList) {
                console.log(fileList);
                this.form.content_img = this.$util.disposeFile(fileList)
            },
            handleRemoveContent(file, fileList) {
                console.log(file, fileList);
                this.form.content_img = this.$util.disposeFile(fileList)
            },
            handlePictureCardPreviewContent(file) {
                this.dialogImageUrl = file.response;
                this.dialogVisible = true;
            },
            upLoadProductInfo(form) {
                this.$refs[form].validate((valid) => {
                    if(valid) {
                        if(!this.form.head_img) {
                            this.$message.error('请上传产品缩略图')
                        } else if(!this.form.content_img.length) {
                            this.$message.error('请上传产品详情图')
                        } else if(!this.form.top_img.length) {
                            this.$message.error('请上传产品展示图')
                        } else {
                            // console.log(this.form);
                            this.upFun()
                        }
                    } else {
                        this.$message.error('请完善必填信息')
                        return false
                    }
                })
            },
            async upFun() {
                const data = await this.$Http.operationIntegralProduct({
                    type: this.type,
                    pro: this.form
                })
                // console.log(data);
                if(data.code === 200){
                    this.$message.success('商品上传成功')
                    this.form = {
                        product_name: '',
                        qz: '',
                        integral: '',
                        head_img: '',
                        content_img: [],
                        supplier_id: this.$store.state.supplier_id,
                        top_img: []
                    }
                    this.dialogFormVisible = false
                    this.$emit('reloadFun')
                }

            }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
    .avatar {
        width: 150px;
        height: 150px;
        display: block;
    }
    .notes {
        font-size: 12px;
        color: #aaa;
    }
</style>
